<template>
	<view class="body">
		<xk-header title="开票列表"></xk-header>
		<view class="util-bar">
			<view class="top-white-box">

				<!--搜索框 start-->
				<view class="search-box">
					<u-search shape="square" placeholder="单号/付款方名称(纳税人名称)/开户银行及账号" height="42" :showAction="false" v-model="formdata.searchKey" @search="searchHandle"></u-search>
				</view>
				<!--搜索框 end-->

				<!--选项切换菜单 start-->
				<u-tabs
					 :current="tabIndex"
					 :list="tabs"
					 @click="clickTabs"
					 lineWidth="40"
					 lineColor="#f56c6c"
					 :activeStyle="{
						 color: '#000000',
						 fontWeight: 'bold',
						 transform: 'scale(1.15)'
					 }"
					 :inactiveStyle="{
						 color: '#303133',
						 transform: 'scale(1.15)'
					 }"
					 itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:25%;"
				 ></u-tabs>
				 <!--选项切换菜单 end-->
			</view>

			 <!--查询日期 start-->
			 <view class="select-search-btn">
				<u-row>
					<u-col span="4" offset="1">
						<view @click="showDate= true">
							<u--text suffixIcon="arrow-down-fill" size="16" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
						</view>
						<u-datetime-picker
							:show="showDate"
							v-model="valuePickerDate"
							mode="year-month"
							@cancel="cancelDate"
							@confirm="confirmDate"
						></u-datetime-picker>
					</u-col>
					<u-col span="2"><view @click="resetSort()">重置</view></u-col>
				</u-row>
			 </view>
			 <!--查询日期 end-->
		 </view>

		 <!--列表 start-->
		 <swiper :current="tabIndex" class="list-swiper list-swiper-other"
		 	@change="(e)=>{tabIndex = e.target.current;ticketApplyListInfo()}"
		 	:style="'height:'+scrollViewHeight+'px;'"
		 	>
		 	<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
		 		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+scrollViewHeight+'px;'" @scrolltolower="bottom">
		 			<view v-if="tabItem.data.length > 0" class="list-info">
		 				<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<!-- <view v-if="item.invoic_status == 10 || item.invoic_status == 20 || item.invoic_status == 30">
								<u-icon name="close" color="#151515" size="28" style="float: right;background-color: #F2F2F2;" @click="cancel(item)"></u-icon>
							</view> -->
							<view class="title">申请单号：{{item.apply_no}}</view>
							    <u-row customStyle="margin-bottom: 10px">
							    	<u-col span="5"><text class="grey-text">申请人：</text></u-col>
							    	<u-col span="7">{{item.apply_user_name}}</u-col>
							    </u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="5"><text class="grey-text">付款方名称：</text></u-col>
									<u-col span="7">{{item.apply_payer_name}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="5"><text class="grey-text">开户银行及账号：</text></u-col>
									<u-col span="7">{{item.apply_bank_account}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="5"><text class="grey-text">发票类型：</text></u-col>
									<u-col span="7">{{item.apply_invoic_type==10?'专票':item.apply_invoic_type==20?'普票':'收据'}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="5"><text class="grey-text">申请日期：</text></u-col>
									<u-col span="7">{{item.apply_date}}</u-col>
								</u-row>
								<!-- <u-button type="primary" text="查看详情" style="width: 20%;margin-left: 280px;margin-bottom: 8px;" @click="ticketDetail(item)"></u-button> -->
								<view class="list-btn">
									<u-row customStyle="margin-bottom: 10px">
										<!-- v-if="$util.getRights().pi_invoic_receiver && $util.getRights().pi_invoic_registe -->
										<u-col span="12" v-if="$util.getRights().pi_invoic_receiver == undefined && item.invoic_status == 20"><view class="yuyue" @click="ticketDetail(item)">查看详情</view></u-col>
										<u-col span="12" v-else-if="$util.getRights().pi_invoic_register == undefined && item.invoic_status == 40"><view class="yuyue" @click="ticketDetail(item)">查看详情</view></u-col>
										<u-col span="6" v-else><view class="yuyue" @click="ticketDetail(item)">查看详情</view></u-col>
										<u-col span="6" v-if="item.invoic_status == 10"><view class="detail" @click="submit(item)">提交</view></u-col>
										<u-col span="6" v-if="item.invoic_status == 20 && $util.getRights().pi_invoic_receiver"><view class="detail" @click="readDetail(item)">受理</view></u-col>
										<!-- <u-col span="6" v-if="item.invoic_status == 10"><view class="detail" @click="modify(item)" style="color: #FAAC58;">修改</view></u-col> -->
										<u-col span="6" v-if="item.invoic_status == 40 && $util.getRights().pi_invoic_register"><view class="detail" @click="register(item)">登记</view></u-col>
										<u-col span="6" v-if="item.invoic_status == 30"><view class="detail" @click="submit(item)" style="color: #FF0040;">受理不通过</view></u-col>
										<u-col span="6" v-if="item.invoic_status == 50"><view class="detail" style="color: #949494;">已完成</view></u-col>
										<u-col span="6" v-if="item.invoic_status == 60"><view class="detail" style="color: #ff0000;">已取消</view></u-col>
									</u-row>
								</view>
							</view>
							<view :class="$util.getRights().pi_delist_apply?'loadText-1':'loadText-0'" v-if="res.length == 0"><u-loadmore :status="loadmoreStatus" /></view>
							<view :class="$util.getRights().pi_delist_apply?'loadText-1':'loadText-0'" v-else><u-loadmore :status="loadmore" @loadmore="showMessage"/></view>
		 			</view>
		 			<view class="empty-view" v-else>
		 				<u-empty mode="list" icon="/static/empty_data_icon.png" text="哎呀，该界面暂无内容~"></u-empty>
		 			</view>
		 		</scroll-view>
		 	</swiper-item>
		 </swiper>
		 <!--列表 end-->
		<view class="common-bottom-view" v-if="$util.getRights().pi_invoic_apply">
		 	<view @click="createFix" class="common-btn">开票申请</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			res:[],
			show: false,
			cancelData:{
				pi_invoic_id:'',
				cancel_content:'',
				cancel_date:'',
				isSubmit:''
			},
			formdata:{
				pi_invoic_id:'',
				apply_payer_name:'',
				apply_payer_no:'',
				apply_address:'',
				apply_bank_account:'',
				apply_phone:'',
				apply_invoic_type:'',
				apply_pic:'',
				apply_isemail:'',
				apply_email:'',
				apply_remark:'',
				dets:[],
				isSubmit:'',
			},
			loadmore:'loadmore',
			loadmoreStatus:'nomore',
			valuePickerDate:uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
			showDate:false,
			valueDate: [{
				date:'',
			}, {
				date:'',
			}, {
				date:'',
			}, {
				date:'',
			}],
			formdata:{
				start:0,
				searchKey:'',
				dateMonth:'',
				spStatus:'',
			},
			scrollViewHeight: 0,
			disabled: true,
			triggered:false,
			invoicId:'',
			applyData:[],
			tabIndex:0,
			tabs: [{
				name: '申请中',
				index: 0,
				badge: {
					isDot: true
				},
				type: 'accept',
				startNum:0,
				isAll: false,
				data: []
			},
			{
				name: '待办',
				index: 1,
				badge: {
					isDot: true
				},
				type: 'done',
				isAll: false,
				startNum:0,
				data: []
			},
			{
				name: '待登记',
				index: 2,
				badge: {
					isDot: true
				},
				type: 'register',
				isAll: false,
				startNum:0,
				data: []
			},
			{
				name: '已完成',
				index: 3,
				badge: {
					isDot: true
				},
				type: 'finish',
				isAll: false,
				startNum:0,
				data: []
			}],
		}
	},
	onLoad() {

	},
	onShow(){
		console.log("权限测试：",this.$util.getRights().pi_invoic_receive)
		this.refresh()
		this.showNum()
	},
	mounted(){
		this.$util.getHeightWithTopEl(".util-bar").then(height => {
			this.scrollViewHeight = height;
		});
	},
	onUnload(){
		uni.$off('refreshPatrolTask')
	},
	onReachBottom(){
	    // 触底的时候请求数据，即为上拉加载更多
	   this.ticketApplyListInfo()
	},
	methods:{
		//触底刷新
		bottom(){
			console.log('触发了上拉触底事件')
			this.ticketApplyListInfo()
		},
		//点击加载（改）
		showMessage(){
			console.log('点击加载')
			this.tabs[this.tabIndex].isAll = false
			this.ticketApplyListInfo()
			if(this.res.length == 0){
				this.loadmore = 'nomore'
			}
		},
		// modify(e){
		// 	console.log("modify-e:",e)
		// 	uni.navigateTo({
		// 		url: '/pages/open-ticket/ticket-apply?invoicId=' + e.pi_invoic_id + '&result=' + e.apply_isemail
		// 	})
		// },

		// cancel(e){
		// 	console.log("取消的内容：",e)
		// 	console.log(this.$util.getNowDate())
		// 	uni.navigateTo({
		// 		url: '/pages/open-ticket/ticket-cancel?invoicId=' + e.pi_invoic_id
		// 	})
		// },
		ticketDetail(e){
			console.log("工单详情：",e)
			uni.navigateTo({
				url: '/pagesB/open-ticket/ticket-detail?invoicId=' + e.pi_invoic_id
			})
		},
		submit(e){
			console.log("提交信息: ",e)
			console.log("收款记录明细：",e.dets)
			this.formdata.pi_invoic_id = e.pi_invoic_id
			this.formdata.apply_payer_name = e.apply_payer_name
			this.formdata.apply_payer_no = e.apply_payer_no
			this.formdata.apply_address = e.apply_address
			this.formdata.apply_bank_account = e.apply_bank_account
			this.formdata.apply_phone = e.apply_phone
			this.formdata.apply_invoic_type = e.apply_invoic_type
			this.formdata.apply_pic = e.apply_pic
			this.formdata.apply_isemail = e.apply_isemail
			this.formdata.apply_email = e.apply_email
			this.formdata.apply_remark = e.apply_remark
			this.formdata.dets = e.dets
			this.formdata.isSubmit = true
			console.log("formdata:",this.formdata)
			this.$util.confirm({
				content: "确定提交开票申请？",
				confirmText: "确定"
			}).then(isConfirm => {
				if (isConfirm) {
					console.log("结果：",this.formdata)
					this.$util.post({
						url: "piInvoic/applyUpdate",
						data: this.formdata,
					}).then(res => {
						uni.redirectTo({
							url: '/pagesB/open-ticket/ticket-apply-list'
						})
					})

				}
			})

		},
		register(e){
			console.log("当前票单信息：",e)
			uni.navigateTo({
				url: '/pagesB/open-ticket/ticket-accept?invoicId=' + JSON.stringify(e.pi_invoic_id)
			})
		},

		//显示信息数量
		async showNum(){
			let applying = []
			let pending = []
			let register = []
			let complete = []

			applying = await this.$api.get_invoic_apply_list(0,'APPLYING')
			pending = await this.$api.get_invoic_apply_list(0,'PENDING')
			register = await this.$api.get_invoic_apply_list(0,'REGISTER')
			complete = await this.$api.get_invoic_apply_list(0,'COMPLETE')

			if(applying.APPLYING.length == 0){this.tabs[0].badge.isDot = false}
			if(pending.PENDING.length == 0){this.tabs[1].badge.isDot = false}
			if(register.REGISTER.length == 0){this.tabs[2].badge.isDot = false}
			if(complete.COMPLETE.length == 0){this.tabs[3].badge.isDot = false}
		},

		readDetail(e){
			console.log("当前票单信息：",e)
			uni.navigateTo({
				url: '/pagesB/open-ticket/ticket-accept?invoicId=' + JSON.stringify(e.pi_invoic_id)
			})
		},
		async ticketApplyListInfo(flag){
			console.log("abc")
			let startNum = this.tabs[this.tabIndex].startNum;
			if(flag === true && startNum != 0) {
				this.stopRefresh()
				return;
			}
			if(this.tabs[this.tabIndex].isAll) {
				this.stopRefresh()
				return; // 加载完成
			}

			//选项卡位置：0申请中1审批2完成
			var statusName='APPLYING';
			if(this.tabIndex==1){statusName='PENDING';}
			if(this.tabIndex==2){statusName='REGISTER';}
			if(this.tabIndex==3){statusName='COMPLETE';}
			console.log("efg")

			//初始化查询条件
			let params = {
				start: startNum,
			}
			console.log("hij")
			//搜索“单号/经办人/申请人单位”关键词
			if(this.formdata.searchKey){
				params.searchKey = this.formdata.searchKey
			}
			//加入筛选日期条件
			if (this.valueDate[this.tabIndex].date) {
				params.dateMonth = this.valueDate[this.tabIndex].date
			}

			let res=[];
			res = await this.$api.get_invoic_apply_list(params,statusName)
			console.log("总数据：",res)
			//选项卡位置：0申请中1审批3完成，返回获取数据。
			if(this.tabIndex===0){res = res.APPLYING}
			if(this.tabIndex== 1){res = res.PENDING}
			if(this.tabIndex== 2){res = res.REGISTER}
			if(this.tabIndex==3){res = res.COMPLETE}
			//返回数据，赋值到对应选项内容列表
			if(res.length == 0 && this.tabs[this.tabIndex].data.length == 0){
				this.stopRefresh()
				return
			}


			console.log('res',res)
			this.res = res
			//默认20条记录为一页
			if(res.length < 2){
				this.tabs[this.tabIndex].isAll = true
			}
			if(this.tabs[this.tabIndex].startNum == 0){
				this.tabs[this.tabIndex].data = res
			}else{
				this.tabs[this.tabIndex].data = this.tabs[this.tabIndex].data.concat(res)
			}
			this.tabs[this.tabIndex].startNum += 2
			this.stopRefresh();
		},
		clickTabs(item) {
		    console.log('item', item);
			this.tabIndex=item.index;
			// this.ticketApplyListInfo(true)
		},
		cancelDate(){
			this.showDate=false;
		},
		confirmDate(e){
			//console.log(uni.$u.timeFormat(new Date(e.value), 'yyyy-mm'));
			this.valueDate[this.tabIndex].date=uni.$u.timeFormat(new Date(e.value), 'yyyy-mm')
			//console.log(this.valueDate)
			this.showDate=false;
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
			}
			this.ticketApplyListInfo()
		},
		pullDownRefresh(){
			if(this.triggered){
				return;
			}
			this.triggered = true;
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false
			}
			this.ticketApplyListInfo(true)
			console.log("下拉刷新：",this.tabs)
		},
		refresh(){
			// this.tabs[this.tabIndex].data = '';
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false
				item.data = []
			}
			this.ticketApplyListInfo()
		},
		searchHandle(){
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
			}
			this.ticketApplyListInfo(true)
		},
		stopRefresh(){
			setTimeout(()=>{
				this.triggered = false;
				console.log('stop')
			}, 500)
		},
		resetSort() {
			if (this.valueDate[this.tabIndex].date) {
				this.valueDate[this.tabIndex].date = ""
				this.resetTab()
				this.ticketApplyListInfo()
			}
		},
		resetTab(){
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
				item.data = []
			}
		},
		createFix(){
			uni.navigateTo({
				url: '/pagesB/open-ticket/ticket-apply'
			})
		},

		//旧的
		// stopRefresh(){
		// 	setTimeout(()=>{
		// 		this.triggered = false;
		// 		console.log('stop')
		// 	}, 500)
		// },
		// tabChange(index) {
		// 	this.tabIndex = index
		// 	this.ticketApplyListInfo();
		// },
		// readDetail(e){
		// 	console.log("当前票单信息：",e)
		// 	uni.navigateTo({
		// 		url: '/pages/open-ticket/ticket-accept?invoicId=' + JSON.stringify(e.pi_invoic_id)
		// 	})
		// },
	},
}
</script>

<style lang="scss" scoped>
// @import '@/pages/home/components/style.scss';

.list-swiper-other{
	background-color: #f7f7f7;
}
.body{
	background:#F8F8F8;
}
.top-white-box{
	background:#FFFFFF;
	margin-bottom:-2px;
}
.search-box{
	padding:10px 15px 10px 15px;
}
.select-search-btn{
	margin:15px 0px 10px 10px;
}
.data-list{
	background:#FFFFFF;
	padding:20px 10px 0px 10px;
	margin:10px;
	border-radius:5px;
	font-size:15px;
	.title{
		font-size:17px;
		font-weight:bold;
		color:#333333;
		margin-bottom:15px;
	}
	.grey-text{
		color:#999999;
	}
	.list-btn{
		text-align: center;
		border-top:1px solid #F5F5F5;
		height:52px;
		line-height:52px;
		color:#000000;
		font-size:17px;
		font-weight:bold;
	}
}
.loadText-0{
	padding:5px 0px 20px 0px;
}
.loadText-1{
	padding:5px 0px 110px 0px;
}
.detail{
	text-align:center;
	color:#0055FE;
}
.yuyue{
	text-align:center;
}
</style>
